Saltar al contenido principal

Habilitación del Módulo de Manipulación de Swiper

Si estás usando el módulo Product Video de Smart Modules en un tema de PrestaShop que usa Swiper Slider, podrías encontrar un problema donde la miniatura del video no aparece junto a las imágenes de tu producto.

Esto generalmente sucede cuando el módulo Manipulation de Swiper no ha sido habilitado. El módulo es esencial para permitir que elementos dinámicos (como diapositivas de video) se inserten en el slider en tiempo de ejecución.

🧠 ¿Cuándo Necesitas Esto?​

Podrías ver un error como este en la consola de tu navegador:

peligro

Uncaught TypeError: slider.addSlide is not a function

Por qué sucede esto

Este error significa que el slider Swiper en tu tema no está inicializado con el módulo Manipulation, que es requerido por el módulo Product Video para agregar dinámicamente miniaturas de video como diapositivas.

¿Las buenas noticias? Solucionar esto solo requiere una pequeña edición en el código de inicialización de Swiper de tu tema.

🛠️ Paso a Paso: Cómo Habilitar el Módulo de Manipulación​

1. Localiza el Código de Inicialización de Swiper​

En los archivos de tu tema, localiza el archivo JavaScript que inicializa el slider de imágenes del producto. Esto típicamente se encuentra en:

/themes/tu-tema/assets/js/product.js
/themes/tu-tema/js/product.js
/themes/tu-tema/js/custom.js

Busca una configuración de Swiper como esta:

var swiper = new Swiper('.swiper-container', {
  // tus opciones de Swiper
});

2. Agrega el Módulo Manipulation​

Dentro de la configuración de Swiper, encuentra la propiedad modules. Agrega Manipulation a la lista.

Ejemplo antes:

modules: [Navigation, Pagination],

Actualiza a:

modules: [Navigation, Pagination, Manipulation],

Si la propiedad modules aún no existe, agrégala así:

modules: [Manipulation],
Mantén los módulos existentes

No elimines ningún módulo existente — solo agrega Manipulation a la lista.

3. Limpia la Caché de PrestaShop​

Después de guardar tus cambios:

  1. Ve a tu Back Office
  2. Navega a Parámetros Avanzados > Rendimiento
  3. Haz clic en Limpiar Caché

Esto asegura que tu JavaScript actualizado se cargue correctamente.

4. Prueba el Resultado​

Recarga cualquier página de producto con un video adjunto. Si todo está correcto, la miniatura del video ahora aparecerá como parte de la galería de imágenes del producto, completamente integrada en el slider Swiper.

📚 Enlaces Relacionados​

¿Qué error indica que falta el módulo Manipulation de Swiper?

Verás un error en la consola del navegador que dice: Uncaught TypeError: slider.addSlide is not a function. Esto significa que Swiper se inicializó sin el módulo Manipulation, que el módulo Product Video necesita para insertar diapositivas de vídeo dinámicamente.

¿Dónde encuentro el código de inicialización de Swiper en mi tema?

Busca en los archivos JavaScript de tu tema, normalmente en themes/tu-tema/assets/js/product.js, themes/tu-tema/js/product.js o themes/tu-tema/js/custom.js. Busca new Swiper para encontrar el bloque de inicialización.

¿Tengo que eliminar los módulos existentes de Swiper al añadir Manipulation?

No. Añade Manipulation al array de módulos existente sin eliminar nada. Por ejemplo, si dice modules: [Navigation, Pagination], cámbialo a modules: [Navigation, Pagination, Manipulation].

Tras editar la configuración de Swiper, ¿por qué no aparece la miniatura del vídeo?

Debes limpiar la caché de PrestaShop después de guardar los cambios en el JavaScript. Ve a Back Office, luego a Parámetros Avanzados, luego a Rendimiento, y haz clic en Limpiar caché.

💬 ¿Aún Necesitas Ayuda?​

Si no estás seguro de dónde se encuentra este código o cómo modificarlo, no dudes en contactar a nuestro equipo de soporte. También puedes enviarnos el archivo donde Swiper está inicializado, y con gusto te guiaremos a través del cambio.

Siguiendo estos pasos, asegurarás la compatibilidad completa entre el slider Swiper de tu tema y el módulo Product Video de Smart Modules, manteniendo tus miniaturas de video funcionando sin problemas y evitando cualquier error de JavaScript.